import React, { Component } from 'react';
import { Platform, StatusBar, Animated, ScrollView, TextInput, StyleSheet, Text, View, Image, TouchableOpacity, ImageBackground, Alert, TouchableWithoutFeedback, Modal } from 'react-native';

class FadeInView extends React.Component {
    state = {
        fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
    }

    componentDidMount() {
        Animated.timing(                  // 随时间变化而执行动画
            this.state.fadeAnim,            // 动画中的变量值
            {
                toValue: 1,                   // 透明度最终变为1，即完全不透明
                duration: 2000,              // 让动画持续一段时间
            }
        ).start();                        // 开始执行动画
    }

    render() {
        let { fadeAnim } = this.state;

        return (
            <Animated.View                 // 使用专门的可动画化的View组件
                style={{
                    ...this.props.style,
                    opacity: fadeAnim,         // 将透明度指定为动画变量值
                }}
            >
                {this.props.children}
            </Animated.View>
        );
    }
}

var Goods = [
    {
        title: '恋爱不是谈出来的，而是陷进去的。',
        price: '房东',
        url: 'vip'
    },
    {
        title: '不能输，笑吧！',
        price: '梦幻岛',
        url: 'vip'
    },
    {
        title: '不要熄灭你的灵感及想象，不要成为你楷模的奴隶。',
        price: '漆黑的魅影',
        url: 'vip'
    },
    {
        title: '重要的感情总是非常单纯 自然脱口而出的',
        price: '电玩咖',
        url: 'vip'
    },
    {
        title: '真相只有一个！',
        price: '柯南',
        url: 'vip'
    },
    {
        title: '真正的大师，如艺术一般 ',
        price: '守望先锋',
        url: 'vip'
    },

]

//单元格组件
class Item extends Component {
    render() {
        return (
            <View style={styles.box}>
                <View style={styles.item}>
                    <TouchableOpacity onPress={this.props.press}>
                        <Text numberOfLines={1} style={styles.item_text}>{this.props.title}</Text>
                        <Text numberOfLines={1} style={styles.item_text1}>{this.props.price}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

//列表组件
class List extends Component {
    render() {
        var data = this.props.goods;
        var list = [];
        for (var i in data) {
            if (i % 2 === 0) {
                var row = (
                    <View key={i} style={styles.row}>
                        <Item
                            url={data[parseInt(i)].url}
                            title={data[parseInt(i)].title}
                            price={data[parseInt(i)].price}
                            press={this.press.bind(this, data[parseInt(i)])}
                        ></Item>
                        <View style={styles.test}>

                        </View>
                        <Item
                            url={data[parseInt(i) + 1].url}
                            title={data[parseInt(i) + 1].title}
                            price={data[parseInt(i) + 1].price}
                            press={this.press.bind(this, data[parseInt(i) + 1])}
                        ></Item>
                    </View>);
                list.push(row);
            }
        }

        return (
            <ScrollView style={{ marginTop: 10 }}>
                {list}
            </ScrollView>
        );
    }

    press(data) {
        Alert.alert('Talk To', ':' + data.title);
    }
}
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = { modalVisible: false };
        this.setModalVisible = this.setModalVisible.bind(this)
    }
    setModalVisible(visible) {
        this.setState({ modalVisible: visible });
    }
    render() {
        return (

            <ScrollView>
                <StatusBar backgroundColor={'#f892ac'}
                    barStyle={'light-content'}
                /><View>
                    <Modal style={[styles.modelStyle, { backgroundColor: 'rgba(25,25,25,0.5)' }]}
                        visible={this.state.modalVisible}
                        animationType={"slide"}
                        transparent={false}
                        onRequestClose={() => { alert("Modal has been closed.") }}
                    >
                        <View style={{ marginTop: 180 }}>
                            <View>
                                <View style={styles.int}>
                                    <Text style={{ marginLeft: 155, marginBottom: 120, fontSize: 16 }}>登陆</Text>
                                    <View style={{ flex: 1, marginTop: 30 }}>
                                        <TextInput
                                            style={styles.input} placeholder={'输入账号'}
                                            placeholderTextColor={'#e3e3e3'}
                                            editable={true} mutiline={true} maxLength={5}
                                            keyboardType={'number-pad'}>
                                        </TextInput>

                                        <TextInput
                                            style={styles.input} placeholder={'输入密码'}
                                            placeholderTextColor={'#e3e3e3'}
                                            editable={true} mutiline={true} maxLength={5}
                                            keyboardType={'number-pad'}>
                                        </TextInput>

                                        <TouchableOpacity style={styles.btn}>
                                            <Text style={{ color: 'white' }}>登陆</Text>
                                        </TouchableOpacity>
                                    </View>
                                </View>

                                <TouchableOpacity onPress={() => {
                                    this.setModalVisible(false)
                                }}>
                                    <Image source={{ uri: 'close' }} style={{ width: 70, height: 70, marginLeft: 145, marginTop: 100 }}></Image>
                                </TouchableOpacity>

                            </View>
                        </View>
                    </Modal>
                </View>

                <View style={styles.container}>
                    <View style={styles.header}>
                        <Text style={{ color: 'white', fontSize: 17, fontWeight: '500' }}>For Me</Text>
                    </View>
                    <FadeInView>
                        <View style={styles.headerone}>

                            <TouchableOpacity onPress={() => { this.setModalVisible(true) }} style={styles.headerBottom}>
                                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 200 }}>
                                    <Image source={{ uri: 'head' }} style={{ height: 150, width: 150, borderRadius: 80 }}></Image>
                                    <View style={{ marginLeft: 50, justifyContent: "space-around" }}>
                                        {/* <View style={[styles.titleGroup]}> */}
                                        <View style={{ flexDirection: 'row', alignItems: 'center' }} >
                                            <Text style={{ fontSize: 30, color: "#474747", fontWeight: 'bold', width: 100 }}>黑  月</Text>
                                            <Image source={{ uri: 'avatar_vip' }} style={{ height: 20, width: 20 }}></Image>
                                        </View>
                                        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
                                            <Text style={{ fontSize: 20, color: "#959595" }} >个人信息</Text>
                                            <Image source={{ uri: 'icon_cell_rightarrow' }} style={{ height: 15, width: 15 }}></Image>
                                        </View>
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <View style={{ marginTop: 80 }}>
                                <FadeInView>
                                    <View style={styles.ctr}>
                                        <List goods={Goods}></List>
                                    </View>
                                </FadeInView>
                            </View>
                        </View>
                    </FadeInView>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: 1300,
        backgroundColor: '#e3e3e3',
    },
    header: {
        backgroundColor: '#f892ac',
        flexDirection: 'row',
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomLeftRadius: 50,
        borderBottomRightRadius: 50
    },
    headerone: {
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomLeftRadius: 50,
        borderBottomRightRadius: 50
    },
    test: {
        marginBottom: 10,
    },
    ctr: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    },
    box: {
        width: 340,
        height: 150,
        backgroundColor: '#ffffff',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    },
    flex: {
        flex: 1
    },
    row: {
        width: 340,
        flexDirection: 'column',
        marginBottom: 10,
    },
    item: {
        height: 140,
        marginRight: 5,
        borderColor: '#ffffff',
    },
    img: {
        marginTop: 5,
        marginLeft: 5,
        width: 130,
        height: 140,
        backgroundColor: '#ffffff'
    },
    item_text: {
        paddingTop: 12,
        fontSize: 18,
        width: 230,
        color: '#898989',
        height: 30,
        lineHeight: 18,
        textAlign: 'center',
        marginTop: 15,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    },

    item_text1: {
        paddingTop: 12,
        fontSize: 12,
        width: 230,
        color: '#fd8b04',
        height: 30,
        lineHeight: 18,
        textAlign: 'center',
        marginTop: 25,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    }
});